<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>1-2 jQuery链式代码风格</title>
    <link rel="stylesheet" href="../css/bootstrap-3.3.6.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <style>
        .menu ul{
            list-style: none;
        }
        .menu a{
            display: block;
            text-overline: none;
            border: 1px outset #5a9ca8;
            cursor: pointer;
        }
        .menu a:hover{
            text-decoration: none;
        }
        .menu{
            border: 2px outset #8e9fa8;
            width: 24%;
            padding: 0;
        }
        .menu .level1{
            background-color: #c9e1eb;
        }
        .menu .level1>a{
            /*font-family: 黑体;*/
            font-weight: 600 ;
            font-size: 1.2em;
        }
        .menu .level2{
            text-indent: 0;
            /*margin: 0;*/
            /*padding: 0;*/
            background-color: #dceeda;
        }
        .menu .highLight{
            color: #3b4147;
            background-color: #efffc9;
        }
    </style>
</head>
<body>
<div class="container">
    <h1>1-2 jQuery链式代码风格</h1>
    <p>
        可以通过小圆点将方法串联起来：
        <code>$(this).addClass("highLight").next().show().parent().siblings().children("a").removeClass("highLight").next().hide();</code>
        也可以这样写，以便更清楚的阅读：
    </p>
    <pre>
            $(this).addClass("highLight")
            .next().show()
            .parent().siblings().children("a").removeClass("highLight")
            .next().hide();
        </pre>
    <header>请点击乐器类名</header>
    <ul class="menu">
        <li class="level1">
            <a>钢琴类</a>
            <ul class="level2">
                <li><a>原声钢琴</a></li>
                <li><a>明亮钢琴</a></li>
                <li><a>电钢琴</a></li>
            </ul>
        </li>
        <li class="level1">
            <a>风琴类</a>
            <ul class="level2">
                <li><a>教堂钢琴</a></li>
                <li><a>手风琴</a></li>
                <li><a>口琴</a></li>
            </ul>
        </li>
        <li class="level1">
            <a>弦乐类</a>
            <ul class="level2">
                <li><a>小提琴</a></li>
                <li><a>中提琴</a></li>
                <li><a>大提琴</a></li>
            </ul>
        </li>
    </ul>
</div>
<script src="../js/jquery-2.2.4.js"></script>
<script src="../js/main.js"></script>
<script>
$(function(){
    $(".level2").hide();
          $(".level1>a").click(function(){
    // $(".level1>a").hover(function(){
//                $(this).addClass("highLight").next().show().parent().siblings().children("a").removeClass("highLight").next().hide();
        $(this).addClass("highLight")
            .next().show()
            .parent().siblings().children("a").removeClass("highLight")
            .next().hide();
    })
})
</script>
</body>
</html>